<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link rel="shortcut icon" href="/qingzhu/images/s.ico" type="image/x-icon">
	<link rel="stylesheet" href="/qingzhu/css/reset.css">
	<link rel="stylesheet" href="/qingzhu/css/common.css">
	<link rel="stylesheet" href="/qingzhu/css/shopcart.css">
	<title>购物车</title>
</head>
<body>
<!-- 顶部栏 -->
<div th:replace="/qingzhu/front/head_and_footer::head"></div>

<div class="outer9">
	<div class="inter1">
		<div class="h1">购物车</div>
	</div>
	<div class="inter2">
		<div class="inter21">
			<input type="checkbox" class="checkAll"><span class="s1">全选</span>
			<span class="s2">商品名称</span><span class="s3">单价</span>
			<span class="count">数量</span><span class="total">小计</span><span class="del">操作</span>
		</div>
		<div class="inter22">
			<ul>
				<li th:each="item : ${myShoppingCartItems}">
					<input type="checkbox" class="check">
					<img th:src="@{${item.goodsCoverImg}}" src="/qingzhu/images/img103.png" alt="">
					<span class="s1_money">
						<span class="s1" th:text="${item.goodsName}">经典系列红色时钟</span>
						<span class="money">¥</span>
					</span>
					<span class="price" th:text="${item.sellingPrice}">580</span>
					<input type="button" value="-" class="sub" th:onclick="'sub(this,'+${item.cartItemId}+')'">
					<span class="count" th:id="${'goodsCount'+item.cartItemId}" th:text="${item.goodsCount}">1</span>
					<input type="button" value="+" class="add" th:onclick="'add(this,'+${item.cartItemId}+')'">
					<span class="money1">¥</span>
					<span class="total" th:text="${item.goodsCount*item.sellingPrice}">580</span>
					<span class="del" th:onclick="'deleteItem('+${item.cartItemId}+')'">删除</span><!-- th:attr="goodsNo=${goodsDetail.goodsNo}" -->
				</li>
			</ul>
		</div>
		<div class="inter23">
			<div class="picture">
				<img src="/qingzhu/images/nullcart.png" alt="">
			</div>
			<p>您的购物车还没有商品，快去挑选心爱的商品吧！</p>
			<a href="allproducts.html"><span>去逛逛</span></a>
		</div>
	</div>
	<div class="inter3">
		<div class="inter31">
			<div class="last">
				<a href="javascript:settle()">确认结算</a>
			</div>
			<input type="checkbox" class="checkAll"><span class="s1">全选</span>
			<span class="ss1">删除</span><span class="ss2">清除下架商品</span>
			<div class="foot">
				已选<span class="totalCount">0</span>件
				合计(不含运费) : <span class="totalPrice">¥0</span>元<br>
				<span class="ss3">已优惠 : <span class="ss4"> ¥0</span></span>
			</div>
		</div>
	</div>
</div>
<!-- footer部分开始 -->
<div th:replace="/qingzhu/front/head_and_footer::footer"></div>
<!-- 返回顶部 -->
<div th:replace="/qingzhu/front/head_and_footer::back_to_top"></div>

<script src="/qingzhu/js/jquery-3.3.1.min.js"></script>
<script src="/qingzhu/js/shopcart.js"></script>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#show-all-type").hover(function () {
            $("#all-type").show()
        }, function () {
            $("#all-type").hide()
        });
        $("#all-type").hover(function () {
            $("#all-type").show()
        }, function () {
            $("#all-type").hide()
        })
    })
</script>
<script type="text/javascript">

	// /**
	//  * 购物车中数量为0时提示
	//  */
	// function tip() {
	// 	swal("购物车中无数据，无法结算", {
	// 		icon: "error",
	// 	});
	// }

	/**
	 * 跳转至结算页面
	 */
	function settle() {
		window.location.href = '/shop-cart/settle'
	}

	// /**
	//  *更新购物项
	//  *
	//  * todo 判断是否与原值相同
	//  */
	// function updateItem(id) {
	// 	var domId = 'goodsCount' + id;
	// 	var goodsCount = parseInt($("#" + domId).text());
	// 	if (goodsCount > 5) {
	// 		swal("单个商品最多可购买5个", {
	// 			icon: "error",
	// 		});
	// 		return false;
	// 	}
	// 	if (goodsCount < 1) {
	// 		swal("数量异常", {
	// 			icon: "error",
	// 		});
	// 		return false;
	// 	}
	// 	var data = {
	// 		"cartItemId": id,
	// 		"goodsCount": goodsCount
	// 	};
	// 	return true;
	// 	$.ajax({
	// 		type: 'PUT',
	// 		url: '/shop-cart',
	// 		contentType: 'application/json',
	// 		data: JSON.stringify(data),
	// 		success: function (result) {
	// 			if (result.resultCode == 200) {
	// 				window.location.reload();
	// 			} else {
	// 				swal("操作失败", {
	// 					icon: "error",
	// 				});
	// 			}
	// 		},
	// 		error: function () {
	// 			swal("操作失败", {
	// 				icon: "error",
	// 			});
	// 		}
	// 	});
	// }

	/**
	 * * 删除购物项
	 * @param id
	 */
	function deleteItem(id) {
		swal({
			title: "确认弹框",
			text: "确认要删除数据吗?",
			icon: "warning",
			buttons: true,
			dangerMode: true,
		}).then((flag) => {
			if (flag) {
				$.ajax({
					type: 'DELETE',
					url: '/shop-cart/' + id,
					success: function (result) {
						if (result.resultCode == 200) {
							window.location.reload();
						} else {
							swal("操作失败", {
								icon: "error",
							});
						}
					},
					error: function () {
						swal("操作失败", {
							icon: "error",
						});
					}
				});
			}
		}
	)
		;
	}
</script>
</body>
</html>